<template>
  <div style="display: inline-flex;">
    <div class="img-list-item common mb_10" v-for="(item,index) in fileList" :key="index">
      <video v-if="!(matchType(item.name))" :style="{width:w,height:h,margin:'0 9px'}"  controls="controls" :src="item.url"> 您的浏览器不支持视频播放</video>
      <el-image
        v-if="matchType(item.name)"
        @mouseover="srcList = [item.url]"
        :preview-src-list="srcList"
        :style="{width:w,height:h,margin:'0 9px'}"
        :src="item.url"
        fit="cover"></el-image>
      <i class="del-img" @click="forkImage(index)"  v-if='isShowImg==true'></i>
    </div>
    <div v-if="maxlength<limit" @click="change">
      <el-upload
        :action="uploadImgUrl"
                 :data="dataObj" :show-file-list="false"
                 :auto-upload="true"
                 :on-remove="handleRemove"
                 :on-success="handleUploadSuccess"
                 :before-upload="beforeUpload"
                 :on-progress="uploadVideoProcess">
      <span class="warpss" :style="{width:w,height:h,lineHeight:h}"  v-if='isShowImg==true'>
      </span>
        <i v-else class="el-icon-plus" :style="{color:'#8C939D',fontSize: '18px',fontWeight:'bold',padding:paddings}"></i>
      </el-upload>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    //是否需要上传图片(false:需要,true:不需要,只能查看图片不能做任何操作)
    isShowImg: {
      type: Boolean,
      default: false
    },
    //个数显示
    limit:{
      type:Number,
      default: 5
    },
    maxlength:{
      type:Number
    },
    value: Array,
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 5
    },
    //宽度
    w: {
      type: String,
      // default:'100px'
    },
    //高度
    h: {
      type: String,
      // default:'100px'
    },
    paddings: {
      type: String,
    }
  },
  data: function() {
    return {
      srcList:[],
      videoFlag: false,
      isShow:true,
      videoUploadPercent: 0,
      count:5,
      videis: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/oss/upload", // 上传的图片服务器地址
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: ''
      },
      dialogVisible: false,
      dialogImageUrl: []
    }
  },
  computed: {
    fileList() {
      this.$emit('videoData23',this.value);
      return this.value;
    }
  },
  mounted() {
    // if(this.fileList.length<this.limit){
      this.isShow = true;
    // }else{
    //   this.isShow = false;
    // }
  },
  methods: {
    //图片视频匹配
    matchType(name){
      //后缀获取
      let suffic = '';
      //获取类型结果
      let result = '';
      try {
        let fileArr = name.split('.');
        suffic = fileArr[fileArr.length - 1]
        // console.log('suffic',suffic);
      } catch (error) {
        suffic = ''
      }
      //图片格式
      var imgList = ['png','jpg','jpeg','bmp','gif'];
      //进行图片匹配
      result = imgList.some(item=>{
        return item === suffic
      })
      // console.log('结果',result);
      if(result){
        result = 'image';
        // console.log('结果',result);
        return result
      }
    },
    //删除视频/图片
    forkImage(index) {
      var data = this.fileList.splice(index, 1);
      this.$emit("delFile", this.fileList);
      // if(this.fileList.length<this.limit){
        this.isShow = true;
      // }else{
      //   this.isShow = false;
      // }
    },
    change(){
      // console.log('点',this.fileList)
      if(this.fileList.length<this.limit){
        this.isShow = true;
      }else{
        this.isShow = false;
      }
    },
    getUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
        return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
      })
    },
    emitInput(fileList) {
      let value = [];
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url);
      }
      this.$emit('input', value)
    },
    handleRemove(file, fileList) {
      this.emitInput(fileList)
    },
    //上传图片/视频成功后的操作
    handleUploadSuccess(res, file) {
      console.log("成功后", file)
      let url = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
      this.fileList.push({
        name: file.name,
        url: url
      });
      this.emitInput(this.fileList);
      this.dialogVisible = true;
      this.videoUploadPercent = 0;
      if(this.fileList.length<this.limit){
        this.isShow = true;
      }else{
        this.isShow = false;
        this.$message({
          message: '最多只能上传' + this.limit + '个视频/张图片',
          type: 'warning',
          duration: 1000
        });
      }
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      // this.videoFlag = true;
      this.videoUploadPercent = Math.floor(event.percent);
    },
    beforeUpload(file) {
      // this.videoFlag = true;
      //视频/图片校验
      if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb','image/jpeg','image/PNG','image/gif'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频/图片格式');
        return false;
      }
      //以下为oss上传接口
      // const _self = this;
      // return new Promise((resolve, reject) => {
      //   policy1().then(response => {
      //     _self.dataObj.policy = response.data.policy;
      //     _self.dataObj.signature = response.data.signature;
      //     _self.dataObj.ossaccessKeyId = response.data.accessid;
      //     _self.dataObj.key = response.data.dir + this.getUUID() + '_${filename}';
      //     _self.dataObj.dir = response.data.dir;
      //     _self.dataObj.host = response.data.host;
      //     // _self.dataObj.callback = response.data.callback;
      //     resolve(true)
      //   }).catch(err => {
      //     console.log(err)
      //     reject(false)
      //   })
      // })
    },
  }
}
</script>
<style lang="scss" scoped>
.warpss {
  display: inline-block;
  border: 1px dashed #DEE5ED;
}

::v-deep.el-upload-list {
  display: none;
}

.el-upload-video {
  width: 149px;
  height: 149px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.el-upload-video-i {
  font-size: 20px;
  font-weight: bold;
  padding-top: 43px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

//视频
.img-list-item {
  position: relative;
  margin: auto;
}



.img-list-item i.del-img {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  background-image: url(/assets/images/close.png);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  top: 0;
  right: 9px;
}
</style>

